<!--
 * @FileName     :   菜单管理
-->
<template>
  <el-card shadow="never">
    <el-button type="primary" @click="handleAdd">新增</el-button>
    <!-- 菜单 -->
    <el-table
      v-loading="loading"
      size="default"
      :data="tableData"
      style="margin-top: 10px"
      :highlight-current-row="true"
    >
      <el-table-column prop="name" label="角色名称" />
      <el-table-column prop="description" label="角色描述" />
      <el-table-column prop="status" label="角色状态">
        <template #default="scope">
          <div @click="handleStatusChange(scope.row)">
            <el-switch
              v-model="scope.row.status"
              size="small"
              style="--el-switch-on-color: #ff4949; --el-switch-off-color: #13ce66"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleJurisdiction(scope.row)"
            >数据权限</el-button
          >
          <el-button link type="primary" size="small" @click="handleMenu(scope.row)"
            >菜单权限</el-button
          >
          <el-button link type="primary" size="small" @click="handleEdit(scope.row)"
            >修改</el-button
          >
          <el-button link type="primary" size="small" @click="handleDelect(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <p class="role-page">
      <el-pagination
        v-model:currentPage="currentPage"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </p>
    <!-- 数据权限 -->
    <record ref="recorRef" :get-menu-list="getList" />
    <!-- 菜单权限 -->
    <menu-pages ref="menuRef"></menu-pages>
    <!-- 新增、修改 -->
    <son ref="sonRef" :get-menu-list="getList"></son>
  </el-card>
</template>
<script setup>
import { onMounted, ref, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue'
import { internetApi } from '@/api/api.js'
import { arrayToTree } from '@/utils/tree.js'
import useTable from '@hoo/useTable'
import Son from './dialog.vue'
import Record from './record.vue'
import MenuPages from './menu.vue'

// const currentPage = ref(1)
// const total = ref(1)

const currentInstance = getCurrentInstance()
const { $request } = currentInstance.appContext.config.globalProperties
// const router = useRouter()
// const tableData = ref([])
// const loading = ref(true)
const sonRef = ref(null)
const recorRef = ref(null)
const menuRef = ref(null)

const { loading, currentPage, total, handleCurrentChange, getList, tableData } = useTable({
  url: internetApi.getRoleList
})

const handleStatusChange = (row) => {
  // 防止重复提交
  if (row.statusLoading) return
  row.statusLoading = true
  try {
    $request(internetApi.updateRoleStatus, { id: row.id, status: !row.status })
    row.status = !row.status
    row.statusLoading = false
  } catch (error) {
    row.statusLoading = false
  }
}
// 数据权限
const handleJurisdiction = (row) => {
  recorRef.value.openDialog(row, 'jurisdiction')
}
// 菜单权限
const handleMenu = (row) => {
  menuRef.value.openDialogMenu(row, 'menu')
}
// 修改
const handleEdit = (row) => {
  sonRef.value.openDialog(row, 'edit')
  console.log('修改')
}
//   新增
const handleAdd = (row) => {
  sonRef.value.openDialog(row, 'add')
}
// 删除
const handleDelect = (row) => {
  ElMessageBox.confirm(`你确定要删除${row.name}吗?`, {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      $request(internetApi.deleteMenu, { id: row.id })
      getList()
      ElMessage({
        type: 'success',
        message: '操作成功'
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作'
      })
    })
}
//   切换页码
// const handleCurrentChange = (val) => {
//   console.log(`current page: ${val}`)
//   currentPage.value = val
//   getList()
// }
// 获取菜单列表
// const getList = () => {
//   $request(internetApi.getRoleList, {
//     currentPage: currentPage.value,
//     pageSize: 10
//   }).then((res) => {
//     tableData.value = res.data.list
//     total.value = res.data.count
//     loading.value = false
//   })
// }
onMounted(() => {
  getList()
})
</script>
<style lang="scss" scoped>
.role-page {
  display: flex;
  padding-top: 20px;
  justify-content: flex-end;
}
</style>
